<!DOCTYPE html>
<html lang="en">
<head>
	<title>Embedded Applet - GeoGebra</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
	<link rel="shortcut icon" href="https://www.geogebra.org/apps/icons/geogebra.ico" type="image/x-icon">
	<link rel="icon" href="https://www.geogebra.org/apps/icons/geogebra.ico" type="image/x-icon">
	<style>
		body {
			font-family: sans-serif;
		}

		label {
			min-width: 160px;
			display: inline-block;
		}

		#draggables {
			display:none;
		}

		#draggables p {
			background-color: wheat;
			margin: 1em;
			padding: .5em;
		}

		#settings {
			position: absolute;
			right: 0;
			top: 0;
			max-height: 100%;
			overflow-y: auto;
			z-index: 1000;
			background-color: rgba(255, 255, 255, 0.9);
		}

		#scaleContainer {
			position: absolute;
			top: 100px;
			left: 100px;
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpolygon points='0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2' fill='%23EEEEEE'/%3E%3C/svg%3E");
		}

		#resizer {
			visibility: hidden;
			position: absolute;
			background-color: #eeeeee;
			border-radius: 50%;
			width: 48px;
			height: 48px;
			line-height: 48px;
			text-align: center;
			left: 100%;
		}

		#glasspane {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			visibility: hidden;
			z-index: 2000;
		}

		.popupImg {
			position: absolute;
			z-index: 3000;
			left: 0;
		}
	</style>

	<script type="text/javascript">
		const params = {
			"module": ["select", "web3d", "webSimple"],
			"appName": ["select", "classic", "graphing", "geometry", "3d", "scientific", "notes", "evaluator", "suite"],
			"perspective": "text",
			"showToolBar": "boolean",
			"showMenuBar": "boolean",
			"showAlgebraInput": "boolean",
			"tubeID": "text",
			"fileName": "text",
			"ggbbase64": "text",
			"enableUndoRedo": ["boolean", true],
			"enableRightClick": ["boolean", true],
			"allowSymbolTable": ["boolean", true],
			"customToolBar": "text",
			"allowStyleBar": "boolean",
			"rounding": "text",
			"language": "text",
			"country": "text",
			"showToolBarHelp": ["boolean", true],
			"errorDialogsActive": "boolean",
			"enableLabelDrags": ["boolean", true],
			"enableShiftDragZoom": ["boolean", true],
			"enableFileFeatures": ["boolean", true],
			"enableGraphing": ["boolean", true],
			"enable3D": ["boolean", true],
			"enableCAS": ["boolean", true],
			"useBrowserForJS": ["boolean", true],
			"screenshotGenerator": "boolean",
			"prerelease": "boolean",
			"useLocalizedDigits": "boolean",
			"useLocalizedPointNames": ["boolean", true],
			"borderColor": ["text", "#D3D3D3"],
			"capturingThreshold": "number",
			"fitToScreen": "boolean",
			"showStartTooltip": "boolean",
			"showLogging": ["select", "true", "false", "graphics"],
			"scale": "number",
			"allowUpscale": "boolean",
			"disableAutoScale": "boolean",
			"scaleContainerClass": "text",
			"autoHeight": "boolean",
			"preventFocus": "boolean",
			"showAppsPicker": "boolean",
			"marginTop": "number",
			"clientId": "text",
			"laf": "text",
			"showResetIcon": "boolean",
			"showAnimationButton": ["boolean", true],
			"showFullscreenButton": "boolean",
			"showZoomButtons": "boolean",
			"showSlides": "boolean",
			"buttonShadows": "boolean",
			"buttonRounding": "number",
			"buttonBorderColor": "text",
			"fullscreenContainer": "text",
			"showTutorialLink": "boolean",
			"app": "boolean",
			"jSON": "text",
			"id": "text",
			"fontSize": "text",
			"keyboardType": ["select", "normal", "scientific", "notes", "solver"],
			"detachKeyboard": ["select", "auto", "true", "false"],
			"textMode": "boolean",
			"editorForegroundColor": "text",
			"editorBackgroundColor": "text",
			"transparentGraphics": "boolean",
			"randomSeed": "text",
			"screenReaderMode": ["select", "auto", "ascii", "unicode"],
			"maxImageSize": "text",
			"width": ["text", 800],
			"height": ["text", 600]
		};

		function decode(el, param) {
			var fallback = false;
			if (typeof params[param] == "object") {
				fallback = params[param][1];
			}
			if (el.type === "checkbox") {
				return el.checked === fallback ? null : (el.checked + "");
			}
			return el.value.length && el.value !== fallback ? el.value : null;
		}

		function onParamChange(param, val, article) {
			if (param === "scaleContainerClass") {
				document.getElementById("scaleContainer").className += " " + val;
				document.getElementById("resizer").style.visibility = val ? "visible" : "hidden";
				var style = document.getElementById("scaleContainer").style;
				style.width = style.width || "800px";
				style.height = style.height || "600px";
			}
			if (val) {
				article.setAttribute("data-param-" + param, val);
			} else {
				article.removeAttribute("data-param-" + param);
			}
		}

		function updateParams(article) {
			var url = location.protocol + "//" + location.host + location.pathname + "?";
			var reloadNeeded = false;
			for (param in params) {
				var val = decode(document.getElementById("set" + param), param);
				onParamChange(param, val, article);
				if (val === "true") {
					url += param + "&";
				} else if (val) {
					url += param + "=" + encodeURIComponent(val) + "&";
				}
				if (param === "module" && val && !window[val]) {
					reloadNeeded = true;
				}
			}
			if (reloadNeeded) {
				location.href = url;
			} else {
				history.pushState("", "", url);
			}
			renderGGBElement(article);
		}

		window.addEventListener("load", function () {
			document.getElementById("snap").addEventListener("click", function() {
				ggbApplet.getScreenshotBase64(function(base64) {
					var popup = document.createElement("img");
					popup.src = "data:image/png;base64," + base64;
					popup.className = "popupImg";
					popup.addEventListener("click", function() {
						popup.remove()
					});
					document.body.appendChild(popup);
				});
			});

			var article = document.createElement("div");

			for (param in params) {
				type = typeof params[param] == "object" ? params[param][0]
					: params[param];
				var input = document.createElement(type === "select" ? "select"
					: "input");
				if (type === "select") {
					for (var opt = 1; opt < params[param].length; opt++) {
						var optVal = params[param][opt];
						var optTag = document.createElement("option");
						optTag.innerText = optVal;
						optTag.value = optVal;
						input.appendChild(optTag);
					}
				}
				label = document.createElement("label");
				label.innerText = param;

				val = typeof params[param] == "object" ? params[param][1] : null;
				input.type = type.replace("boolean", "checkbox");
				if (type === "boolean") {
					input.checked = !!val;
				} else {
					input.value = val;
				}
				if (val !== null) {
					article.setAttribute("data-param-" + param, val);
				}
				input.id = input.name = "set" + param;
				input.addEventListener("change", function () {
					updateParams(article);
				});
				label.setAttribute("for", "set" + param);
				field = document.createElement("div");
				field.appendChild(label);
				field.appendChild(input);
				document.getElementById("settings").appendChild(field);
			}

			article.className = "geogebraweb";
			document.getElementById("parent").appendChild(article);
			settings = location.search.substring(1).split("&");
			var module = "web3d";

			for (i in settings) {
				var parts = settings[i].split("=");
				if (params[parts[0]]) {
					var val = decodeURIComponent(parts[1] || "true");
					if (parts[0] === "module") {
						module = val;
					} else {
						onParamChange(parts[0], val, article);
					}
					const input = document.getElementById("set" + parts[0]);
					if (input.type === 'checkbox') {
						input.checked = val === "true";
					} else {
						input.value = val;
					}
				}
			}

			var w3d = document.createElement("script");
			w3d.src = module + "/" + module + ".nocache.js";
			document.body.appendChild(w3d);
			var resizer = document.getElementById("resizer");
			var glasspane = document.getElementById("glasspane");
			resizer.addEventListener("pointerdown", function () {
				resizer.dragging = true;
				glasspane.style.visibility = "visible";
			});
			glasspane.addEventListener("pointerup", function () {
				resizer.dragging = false;
				glasspane.style.visibility = "hidden";
			});
			glasspane.addEventListener("pointermove", function (e) {
				if (resizer.dragging) {
					var x = e.x - 100;
					var y = e.y - 100;
					document.getElementById("scaleContainer").style.width = x + "px";
					document.getElementById("scaleContainer").style.height = y + "px";
					resizer.style.left = (x - 24) + "px";
					resizer.style.top = (y - 24) + "px";
				}
			});
			document.getElementById("hide").addEventListener("click", function(e) {
				document.getElementById("settings").style.display = "none";
			});
			document.getElementById("testDrag").addEventListener("click", function(e) {
				document.getElementById("draggables").style.display = "flex";
			});

			function dragStart(event) {
				const el = event.srcElement;
				if (el.getAttribute("data-type")) {
					event.dataTransfer.setData(el.getAttribute("data-type"),
						el.getAttribute("data-content") || el.innerHTML);
				} else if (el.querySelector("img")) {
					// binary not supported in Chrome, use data URL instead https://bugs.chromium.org/p/chromium/issues/detail?id=438479
					const url = el.querySelector("img").src;
					const mime = url.match(/:(.*?);/)[1]; // assumes data URL
					event.dataTransfer.items.add(url, mime);
				}
			}
			for(const dragSrc of document.querySelectorAll("p[draggable]")) {
				dragSrc.addEventListener("dragstart", dragStart);
			}

		});
	</script>
</head>
<body>
<button id="snap">Screenshot</button>
<button id="testDrag">Test dragging</button>
<div id="draggables">
	<p draggable="true" data-type="text/plain">Drag me as text!</p>
	<p draggable="true" data-type="application/x-latex" data-content="\sqrt{a}"><img draggable="false" src=""/></p>
	<p draggable="true" data-type="application/mathml-presentation+xml"><math display="block"><mrow>  <mi>x</mi>  <mo>=</mo>  <mfrac>    <mrow>      <mrow>        <mo>-</mo>        <mi>b</mi>      </mrow>      <mo>&PlusMinus;</mo>      <msqrt>        <mrow>          <msup>            <mi>b</mi>            <mn>2</mn>          </msup>          <mo>-</mo>          <mrow>            <mn>4</mn>            <mo>&InvisibleTimes;</mo>            <mi>a</mi>            <mo>&InvisibleTimes;</mo>            <mi>c</mi>          </mrow>        </mrow>      </msqrt>    </mrow>    <mrow>      <mn>2</mn>      <mo>&InvisibleTimes;</mo>      <mi>a</mi>    </mrow>  </mfrac></mrow></math></p>
	<p draggable="true"><img src=''/></p>
</div>
<div id="settings"><button id="hide">Hide settings</button></div>
<div id="scaleContainer">
	<div>
		<div id="parent"></div>
	</div>
	<div id="resizer">
		&#x2194;
	</div>
</div>
<div id="glasspane"></div>
</body>
</html>
